<template>
  <div class="article">
    <!-- 顶部导航开始 -->
    <!-- <p>获取传过来的id{{this.$route.params.id}}</p> -->
    <van-nav-bar fixed title="做法细节" left-text="返回" right-text="收藏" left-arrow @click-left="$router.go(-1)"
      @click-right="onClickRight" />
    <!-- 导航导航结束 -->
    <!-- 正文区域开始 -->
    <div class="question" v-for="x in Anarticle" :key="x.lid">
      <!-- 标题图 -->
      <div class="rich-content">
        <img :src="x.pic" alt="" />
      </div>
      <p style="
          background: #fff;
          padding-left: 20px;
          font-size: 20px;
          font-weight: bold;
          line-height: 28px;
          color: #313131;
        ">
        {{ x.food }}
      </p>
      <!-- 标题 -->
      <div style="
          background: #fff;
          font-size: 11px;
          color: #4a4945;
          padding: 15px 15px;
        ">
        <img style="vertical-align: top; height: 27px"
          src="https://image.hongbeibang.com/FgRQxfAWq4kOdLc5xd_GxWm03Vs_?54X54&imageView2/1/w/54/h/54" alt="" />
        <span style="font-size: 13px; line-height: 26.5px; color: #e98b71">{{ x.views }}+</span>
        <span>在做</span>
      </div>
      <div style="height: 10px; width: 100%; background-color: #f5f7f9"></div>
      <!-- 弹出 -->
      <!-- 小点点 -->
      <!-- <div style="height: 2.872px;width: 2.872px; background-color: #E98B71;"></div> -->
      <van-cell is-link title="分步教学  唯一品类  图片下载 高效学习体验" @click="show = true" />
      <van-action-sheet v-model="show" title="服务">
        <p class="content">分步骤学习</p>
        <p class="content1">分步骤学习，成功率更高。</p>
        <p class="content">专注打造唯一品类</p>
        <p class="content1">
          每个品类只有一个课程，为你提供更好的配方与做法，持续优化迭代。
        </p>
        <p class="content">图片素材下载</p>
        <p class="content1">提供高清图片素材，方便私房及商用宣传。</p>
        <p class="content">高效的学习体验</p>
        <p class="content1" style="padding-bottom: 20px">
          课程精心录制、剪辑，剔除无效内容，让学习更高效。
        </p>
      </van-action-sheet>
      <div style="height: 10px; width: 100%; background-color: #f5f7f9"></div>
      <!-- 作者信息开始 -->
      <div class="author-info">
        <img src="../assets/04f1c856a9e52a000001cd4053a03e.jpg" class="author-info-avatar" />
        <div class="author-info-detail">
          <div class="author-info-nickname">淘气的松鼠</div>
          <div class="author-info-badge">
            共<mt-badge type="primary" size="small">123</mt-badge>篇
          </div>
        </div>
      </div>
      <!-- 作者信息结束 -->
      <!-- 内容开始 -->
      <div class="question-content">
        <div class="rich-content" style="font-weight: 200; font-size: 17px; line-height: 27px">
          <p style="font-weight: bold">小介绍</p>
          <p v-html="x.introduction"></p>
          <p style="font-weight: bold">食材用料</p>
          <p v-html="x.material"></p>
          <p v-html="x.steps"></p>
          <p style="font-weight: bold">小贴士</p>
          <p v-html="x.tips"></p>
          <van-divider />
        </div>
      </div>
      <!-- 内容结束 -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      Anarticle: [],
      show: false,
    };
  },
  methods: {
    onClickRight() {
      Toast("收藏");
    },
  },
  mounted() {
    let id = this.$route.params.id; // 获取上一个页面传来的ID
    if (!id) {
      alert("上一个页面没有传过来文章id参数");
    }
    console.log(id);
    // 发送http请求，通过id获取当前文章的详细信息
    this.$axios.get(`/show/${id}`).then(res => {
      //获取完整信息的文章对象
      console.log(res.data.data);
      // 将结果存入data，在页面中显示对象属性数据
      this.Anarticle = res.data.data;
    });
  },
};
</script>
<style>
.content {
  padding: 10px 20px;
}

.content1 {
  padding: 0px 20px;
  font-size: 14px;
  color: #999;
  line-height: 20px;
}

p {
  margin: 0;
  padding: 0;
}

.article {
  background: #fff;
  height: 100vh;
}

.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 8px 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}

.author-info-avatar {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

.author-info-detail {
  margin-left: 15px;
}

.author-info-nickname {
  font-size: 15px;
  margin-bottom: 6px;
}

.author-info-badge {
  font-size: 14px;
}

.question-content {
  padding: 10px;
}

.rich-content p {
  padding: 5px 0;
  line-height: 1.7;
}

.rich-content img {
  width: 375px;
  max-width: 100%;
}

.van-nav-bar__text {
  color: #e98b71;
}

.van-nav-bar__title {
  color: #e98b71;
}

.van-nav-bar .van-icon {
  color: #e98b71;
}

.van-nav-bar {
  background-color: #faf4f0;
}
</style>
